<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="未完成" name="undo">
      <!-- 未完成 -->
      <exam-box
        v-for="item in undoExams"
        :key="item.exam_id"
        :exam="item"
        :to="to"
      ></exam-box>
    </el-tab-pane>
    <el-tab-pane label="已完成" name="done">
      <div class="title">已批阅（{{ done1.length }}）</div>
      <exam-box
        v-for="item in done1"
        :key="item.exam_id"
        :exam="item"
        :to="to"
      ></exam-box>
      <div class="title">待批阅（{{ done2.length }}）</div>
      <exam-box
        v-for="item in done2"
        :key="item.exam_id"
        :exam="item"
        :to="to"
      ></exam-box>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Notification from "../../components/Notification.vue";
import ExamBox from "@/components/ExamBox2.vue";
export default {
  name: "Exam",
  components: { Notification, ExamBox },
  data() {
    return {
      exams: [
        {
          exam_id: "1",
          title: "第一次考试",
          status: 2,
          type: "测试",
          deadline: "2023年2月6日16:30:47",
        },
        {
          exam_id: "2",
          title: "第二次考试",
          status: 1,
          type: "考试",
          deadline: "2023年2月6日16:30:47",
        },
        {
          exam_id: "3",
          title: "第三次考试",
          status: 0,
          type: "考试",
          deadline: "2023年2月6日16:30:47",
        },
      ],
      activeName: "undo",
      to: "/examination",
    };
  },
  computed: {
    done1() {
      //已批阅
      return this.exams.filter((e) => e.status == 2);
    },
    done2() {
      //未批阅
      return this.exams.filter((e) => e.status == 1);
      // return [];
    },
    undoExams() {
      return this.exams.filter((e) => e.status == 0);
      // return this.exams;
    },
  },
  methods: {
    handleClick() {},
    handleChange() {},
  },
  created() {
    const { student_id } = JSON.parse(localStorage.getItem("userInfo"));
    this.axios
      .get(`${this.$reqPrefix}/getExams?student_id=${student_id}`)
      .then((res) => {
        if (res.data.code == 200) {
          this.exams = res.data.data.exams;
        }
      });
    // const socketAddr = `ws://192.168.1.124:8080/websocket/${student_id}`
    // this.socket = new WebSocket(socketAddr);

    // this.socket.onopen = () => {
    //   console.log('WebSocket connection established.');
    // };

    // this.socket.onmessage = (event) => {
    //   // const message = JSON.parse(event.data);
    //   // console.log('Received message:', event.data);
    //   this.exams = event.data;
    // };

    // this.socket.onclose = () => {
    //   console.log('WebSocket connection closed.');
    // };
  },
};
</script>

<style lang='less' scoped>
.el-tabs {
  height: 100%;
  :deep(.el-tabs__content) {
    height: calc(100% - 55px);
  }
  .el-tab-pane {
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    // background-color: red;
    .title {
      line-height: 42px;
      padding: 20px 0 0 10px;
      font-size: 16px;
      font-weight: 500;
      color: #181e33;
    }
  }
}
</style>